<template>
  <div class="my-course">
    <nav-bar class="nav-bar-position">我的课程</nav-bar>
    <white-space/>
    <!--    已报名  -->
    <ul class="course-list nav-bar-full">
      <li
        :key="i"
        @tap="NavigateTo({
          url:'/pages_course/course_list/course_list',
          query:{id:course.id}
        })"
        :style="{backgroundImage:(course.is_audition === 1 && course.is_claim === 1) ? 'none' : `url(${course.picture})`}"
        class="course-item"
        v-for="(course , i) in myCourse.list"
      >
        <section class="no"
                 v-if="course.is_audition === 1 && course.is_claim === 1"
        >
          <header
            :style="{backgroundImage:`url(${course.picture})`}"
          >
            <h1>{{ course.name }}</h1>
            <h2>{{ course.class_schedule }}</h2>
          </header>

          <footer>
            <section class="try">
              您还没有报名噢~
            </section>
            <my-button @tap="NavigateTo({url:'/pages_course/free_course/free_course'})">免费领取试听课</my-button>
          </footer>
        </section>

        <section
          class="_no"
          v-else
        >
          <h1>{{ course.name }}</h1>

          <div class="progress">
            <div
              :style="{ width: course.width < 7 ? '20px' : course.width  + '%' }"
              class="now">
              <span
                :style="{
                left: course.width > 20 ? 20 : course.width + (course.width < 7 ? 7 : 2) + '%' ,
                color: course.width > 20 ? '' : '#FFCC18'
              }"
              >{{ course.end_total }}/{{ course.total }}</span>
            </div>
          </div>
        </section>


      </li>


    </ul>

    <TabBar :cur="1" class="tab-bar-position"/>
    <white-space :height="50"/>

  </div>
</template>

<script>
  import TabBar from '../../component/tab-bar/tab-bar'
  import MyButton from '../../component/my-button/my-button'
  import { NavigateTo } from "../../utils/router";

  import { mapState, mapActions } from 'vuex';

  export default {
    name: 'my-course',
    components: {
      TabBar,
      MyButton
    },
    data() {
      return {
        imageUrl: this.$imageUrl,
      }
    },
    computed: mapState('Course', ['myCourse']),
    methods: {
      ...mapActions('Course', ['reqCourseList']),
      NavigateTo,
    },
    onShow() {
      this.reqCourseList({ type: 2 });
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .my-course {
    @include bg;

    .course-list {
      margin-top: upx(40);

      .course-item {
        position: relative;
        width: upx(670);
        height: upx(420);
        background-size: 100% 100%;
        border-radius: upx(32);
        margin: 0 auto upx(40);

        section._no {
          position: absolute;
          width: 100%;
          bottom: upx(40);

          h1 {
            @include ft(44, #fff, 500);
            text-align: center;
            padding-bottom: upx(30);
          }

          .progress {
            position: relative;
            width: upx(558);
            height: upx(40);
            border-radius: upx(20);
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 0 0 upx(12) rgba(255, 255, 255, 0.6);

            .now {
              height: upx(40);
              background: linear-gradient(180deg, rgba(255, 211, 34, 1) 0%, rgba(255, 186, 0, 1) 100%);
              border-radius: upx(20);
              overflow: hidden;
              max-width: 100%;
            }

            span {
              position: absolute;
              left: upx(20);
              top: 0;
              bottom: 0;
              margin: auto;
              line-height: upx(40);
              @include ft(24, #fff, 500);
            }
          }
        }
      }
    }

    .no {
      margin-top: upx(30);
      border-radius: upx(32);
      box-shadow:0 4px 36px 0 rgba(122,137,130,0.14);

      header {
        width: 100%;
        background-size: 101%;
        height: upx(420);

        text-align: center;

        h1 {
          padding: upx(280) 0 upx(8) 0;
          letter-spacing: .05em;
          @include ft(44, #fff, 500)
        }

        h2 {
          @include ft(32, #fff, 500);
          letter-spacing: .03em;
        }
      }

      .try {
        @include ft(32);
        text-align: center;
        margin: 0 0 upx(20) 0;
      }

      footer {
        padding: 0 0 upx(40) 0;
        margin-top: upx(40);
      }
    }

  }


</style>
